<template>
  <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSaleSubmit">
      <div class="client-header">
        <div class="client-header-title">售后单详情</div>
        <div class="client-header-copy"></div>
        <div>
          <a-row>
            <a-col :span="24" :style="{ textAlign: 'right' }"  v-if="showSaleUpdateBtn && showRoleBtn">
              <a-button class="client-update" type="primary" @click="showClientUpdate">修改</a-button>
            </a-col>
            <a-col :span="24" :style="{ textAlign: 'right' }"  v-if="!showSaleUpdateBtn && showRoleBtn">
              <a-button class="client-update" type="primary" html-type="submit">确认修改</a-button>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="sale-content">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="所属片区">
              <!--<a-select :class="[showSaleUpdateBtn ? 'input-disable':'']" show-search option-filter-prop="children"
                        v-decorator="['ownDistrict',
          { initialValue: saleData.ownDistrict,
            rules: [{ required: true, message: '请选择所属片区' }] },
        ]"
                        placeholder="请选择所属片区"
              >
                <a-select-option v-for="item in districtArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>-->
              <div class="belonged-district">{{ ownDistrict }} - {{ secondDepartment }}</div>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="任务类别">
              <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']" show-search option-filter-prop="children"
                        v-decorator="['taskType',
          { initialValue: saleData.taskType,
            rules: [{ required: true, message: '请选择任务类别' }] },
        ]"
                        placeholder="请选择任务类别"
              >
                <a-select-option v-for="item in taskTypeArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item style="display: none">
              <a-input  v-decorator="['id',
                  { initialValue: saleData.id },
                ]" />
            </a-form-item>
            <a-form-item style="display: none">
              <a-input  v-decorator="['impedimentState',
                  { initialValue: saleData.impedimentState },
                ]" />
            </a-form-item>
            <a-form-item style="display: none">
              <a-input  v-decorator="['afterSaleNumber',
                  { initialValue: saleData.afterSaleNumber },
                ]" />
            </a-form-item>
            <a-form-item style="display: none">
              <a-input  v-decorator="['repairOrderNumber',
                  { initialValue: saleData.repairOrderNumber },
                ]" />
            </a-form-item>

          </a-col>
          <a-col :span="8">
            <a-form-item label="保修状态">
              <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']" show-search option-filter-prop="children"
                        v-decorator="['guaranteeState',
          { initialValue: saleData.guaranteeState,
            rules: [{ required: true, message: '请选择保修状态' }] },
        ]"
                        placeholder="请选择保修状态"
              >
                <a-select-option v-for="item in guaranteeStateArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="客户类型">
              <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']" show-search option-filter-prop="children"
                        v-decorator="['customerType',
          { initialValue: saleData.customerType,
            rules: [{ required: true, message: '请选择客户类型' }] },
        ]"
                        placeholder="请选择客户类型"
              >
                <a-select-option v-for="item in clientTypeArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="故障使用时间">
              <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']" show-search option-filter-prop="children"
                        v-decorator="['faultyPartsTime',
          { initialValue: saleData.faultyPartsTime,
            /*rules: [{ required: true, message: '请选择故障使用时间' }]*/ },
        ]"
                        placeholder="请选择故障使用时间"
              >
                <a-select-option v-for="item in failurePartsArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="重大问题" class="significant-problem">
              <span :class="[showSaleUpdateBtn ? 'significant-problem-label-disable':'']">
                <a-radio-group v-model="isViIssue" button-style="solid"
                               @change="onRadioChange">
                  <a-radio-button value="true">是</a-radio-button>
                  <a-radio-button value="false">否</a-radio-button>
                </a-radio-group>
              </span>
              <a-select v-if="flag && radioShow"
                        :class="[showSaleUpdateBtn ? 'input-disable input-disable-issue':'input-disable-issue']"
                        show-search option-filter-prop="children"
                        v-decorator="['viIssueInfo',
          { initialValue: viIssueInfo,
            rules: [{ required: true, message: '请选择重大问题' }] },
        ]"
                        placeholder="请选择重大问题">
                <a-select-option v-for="item in significantArray" :key="item" :value="item">
                  {{item}}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统编号">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['ncNumber',
                  {
                    initialValue: saleData.ncNumber,
                    rules: [{ required: true, pattern: /\S/, message: '数控系统编号' }]
                    },
                ]"
                       placeholder="数控系统编号" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统版本">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['ncVersionType',
                  {
                    initialValue: saleData.ncVersionType },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="数控系统SN">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['macSn',
                  {
                    initialValue: saleData.macSn,
                    rules: [{ required: true, pattern: /^[a-zA-Z0-9]{1,20}$/, message: '请输入系统SN(仅限数字和字母)' }]
                    },
                ]"
                       placeholder="请输入系统SN(仅限数字和字母)" autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="信息来源">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['informationSource',
                  {
                    initialValue: saleData.informationSource,
                    rules: [{ required: true, pattern: /\S/, message: '请输入信息来源' }]
                    },
                ]"
                       placeholder="请输入信息来源" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="故障发生时间">
              <a-date-picker :class="[showSaleUpdateBtn ? 'input-disable':'client-purchase-time']"
                             :disabled-date="disabledDate"
                             v-decorator="['impedimentStartTime',
                  {
                    initialValue: impedimentStartTime || doHandleDate,
                    rules: [{ required: true, pattern: /\S/, message: '请输入设备购买时间' }]
                    },
                ]"
                             placeholder="请输入设备购买时间" autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="故障件型号">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['faultyPartsType',
                  { initialValue: saleData.faultyPartsType },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="故障件编号">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['faultyPartsNumber',
                  { initialValue: saleData.faultyPartsNumber },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :span="24" style="display: block">
          <a-col :span="2" style="display: block"><div class="sale-pic-title"><span class="pic-must">✻</span>人员信息:</div></a-col>
          <a-col :span="22" style="display: block">
          
            <slotCardLists :option="slotCardListsOption" :cardLists="engineers">
              <template v-slot:cardhead>
                <a-icon type="user-add" /><span>人员新增</span>
              </template>

              <template v-slot:cardBody="{ item }">
                  <div class="boxBody">
                    <div class="itemWrap">
                      <div class="label">
                        <span>现场工程师</span>
                      </div>
                      <!-- <div class="separator"><span>:</span></div> -->
                      <div class="content">
                        <a-select
                          v-model="item.username"
                          style="width: 100%;"
                          show-search
                          placeholder="请选择现场工程师"
                          :options="assignLists"
                          :filter-option="filterAssignName"
                          :disabled="showSaleUpdateBtn"
                        >
                        </a-select>
                      </div>
                    </div>

                    <div class="itemWrap">
                      <div class="label">
                        <span>处理时间(天)</span>
                      </div>
                      <div class="content">
                        <a-input v-model="item.day" :disabled="showSaleUpdateBtn" allow-clear />
                      </div>
                    </div>

                    <div class="itemWrap">
                      <div class="label">
                        <span>加班时间(小时)</span>
                      </div>
                      <div class="content">
                        <a-input v-model="item.overtime" :disabled="showSaleUpdateBtn" allow-clear />
                      </div>
                    </div>

                    <div class="itemWrap">
                      <div class="label">
                        <span>处理设备数量</span>
                      </div>
                      <div class="content">
                        <a-input v-model="item.resolveNcNumber" :disabled="showSaleUpdateBtn" allow-clear />
                      </div>
                    </div>

                  </div>
              </template>
            </slotCardLists>
            
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8" style="display: block">
            <a-form-item label="其他描述">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['otherDescription',
                  { initialValue: saleData.otherDescription },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="解决方案">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['solution',
                  { initialValue: saleData.solution },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="display: block">
            <a-form-item label="需求建议">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['demandSuggestion',
                  { initialValue: saleData.demandSuggestion },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="设备类型" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['equipmentType',
          { initialValue: saleData.equipmentTypeArray,
            rules: [{ required: true, message: '请选择设备类型' }] },
        ]"
                      placeholder="请选择设备类型"
            >
              <a-select-option v-for="item in deviceTypeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障类型" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentType',
          { initialValue: saleData.impedimentTypeArray,
            rules: [{ required: true, message: '请选择故障类型' }] },
        ]"
                      placeholder="请选择故障类型"
            >
              <a-select-option v-for="item in impedimentTypeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障分类" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['faultClass',
          { initialValue: saleData.faultClassArray,
            rules: [{ required: true, message: '请选择故障分类' }] },
        ]"
                      placeholder="请选择故障分类"
            >
              <a-select-option v-for="item in faultClassArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障原因" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentReason',
          { initialValue: saleData.impedimentReasonArray,
            rules: [{ required: true, message: '请选择故障原因' }] },
        ]"
                      placeholder="请选择故障原因"
            >
              <a-select-option v-for="item in impedimentReasonArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="故障处理结果" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['impedimentResolveResult',
          { initialValue: saleData.impedimentResolveResultArray,
            rules: [{ required: true, message: '请选择故障处理结果' }] },
        ]"
                      placeholder="请选择故障处理结果"
            >
              <a-select-option v-for="item in impedimentResolveResultArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="重大专项课题名称">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['topicName',
                  { initialValue: saleData.topicName },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="8" style="display: block">
            <a-form-item label="重大专项课题编号">
              <a-input :class="[showSaleUpdateBtn ? 'input-disable':'']" v-decorator="['topicNumber',
                  { initialValue: saleData.topicNumber },
                ]"
                       autoComplete="off" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="重大专项应用领域" class="row-multiply">
            <a-select :class="[showSaleUpdateBtn ? 'input-disable':'']"
                      show-search option-filter-prop="children" mode="multiple"
                      v-decorator="['applicationRange',
          { initialValue: saleData.applicationRangeArray },
        ]"
            >
              <a-select-option v-for="item in applicationRangeArray" :key="item" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-form-item label="现场详细记录" class="row-multiply">
            <a-textarea autoSize  :class="[showSaleUpdateBtn ? 'input-disable':'']"
                        v-decorator="['impedimentDescri',
          { initialValue: saleData.impedimentDescri || '',
            rules: [{ required: true, pattern: /\S/, message: '请描述详细记录' }] },
        ]"
                        placeholder="请描述详细记录"  autoComplete="off" />
          </a-form-item>
        </a-row>
        <a-row :span="24" style="display: block">
          <a-col :span="1" style="display: block"><div class="sale-pic-title"><span class="pic-must">✻</span> 图片:</div></a-col>
          <a-col :span="16" style="display: block">
            <div class="sale-pic-container">
              <sale-image
                :showSaleUpdateBtn="showSaleUpdateBtn"
                :newFileList="fileList" @handleChangePic="handleChangePic"
              ></sale-image>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-form>
  </div>
</template>
<script>
  import SaleImage from './saleImage'
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
  import moment from 'moment';
  import 'moment/locale/zh-cn';
  import { getRoleId } from "@/unit/tool";
  import slotCardLists from "../../../components/slotCardLists/index";

  export default {
    name: "SaleClientDetail",
    components: {
      SaleImage,
      slotCardLists
    },
    // props: {
    //   userName: String
    // },
    data () {
      return {
        expand: true,
        showSaleUpdateBtn: true,
        formItemLayout: {
          labelCol: { span: 1 },
          wrapperCol: { span: 14 },
        },
        clientData: {},
        saleData: {},
        fileList: [],
        clientFileList: [],
        picturesId: '',
        originalPicturesId: '',
        impedimentStartTime: '',
        isViIssue: '',
        flag: false,
        viIssueInfo: '',
        radioShow: true,
        showRoleBtn: true,
        form: this.$form.createForm(this, { name: 'advanced_search' }),
        provinceData: ["北京市","天津市","上海市","重庆市","河北省","山西省","内蒙古","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省",
          "福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","广西","海南省","四川省","贵州省","云南省","西藏","陕西省","甘肃省",
          "青海省","宁夏","新疆","香港","澳门","台湾省", "研究院"],
        districtArray: ['华中片区', '华北片区', '华东片区', '东北片区', '西北片区', '深圳分公司', '宁波分公司',
          '重庆分公司', '沈阳分公司', '云南分公司', '泉州分公司'],
        taskTypeArray: ['设备调试', '故障报修', '培训申请', '大赛技术支持', '技术咨询', '其他', '机床翻新', '驻厂服务'],
        guaranteeStateArray: ['保内免费', '保内收费', '保外免费', '保外收费'],
        clientTypeArray: ['工业-机床厂', '工业-最终用户', '教育行业'],
        failurePartsArray: ['开箱损坏', '厂内调试', '现场交机','1个月', '3个月', '6个月', '12个月', '24个月','保外', '无故障件'],
        significantArray: ['掉刀', '跑偏', '撞机', '铣深', '扎刀'],
        deviceTypeArray: ['加工中心', '铣床', '钻攻中心', '车床', '机器人','木工机', '五轴', '磨床', '智能产线', '专机', '理实一体化'],
        impedimentTypeArray: ['系统硬件', '系统软件', '驱动器', '主轴电机', '移动轴电机','线缆故障', '开关电源', 'IO故障', 'UPS', '多摩川电机',
          '刀库电机', '刀库','电阻问题', '机械故障', '其他'],
        faultClassArray: ['系统硬件','软件bug', '驱动器', '主轴电机', '移动轴电机','线缆故障','IO故障','UPS故障','开关电源','多摩川电机','刀库电机','刀库','电阻问题',
          '机械故障', 'A1主电路欠压', 'A2主电路过压', 'A3IPM模块故障','A4制动故障', 'A5','A6电机过热', 'A7编码器数据信号错误', 'A8编码器类型错误',
          'A9系统软件过热','A10过电流','A11电机超速','A12跟踪误差过大','A13电机长时间过载','A14控制参数读取错误','A15指令超频','A16控制板硬件故障','A17驱动单元过热',
          'A18','A19AD转换故障', 'A20反向超程警告','A21正向超程警告','A22系统自识别调整错误', 'A23NCUC数据帧校验错误', 'A24NCUC数据丢包错误', 'A25通讯链路断开',
          'A26电机编码器信号通讯故障', 'A27', 'A28','A29驱动及电机型号代码匹配错误', 'A30电机相序错误', 'A31电机定向错误','A32Z脉冲没有找到', 'A33速度偏差过大',
          'A34多摩川编码器电池警告', 'A35多圈位置出错', 'A36多摩川编码器计数溢出', 'A37全闭环编码器计数错误','A38适配多摩川编码电机零位不正常警告信息','堵转、负载大',
          'A39适配多摩川编码电机非华大电机警告','A40配多摩川编码电机非华大电机型号代码错误','A41非绝对式编码器初始相位错误','异响','短路','电机抖','无法上使能','超速',
          '跑偏','无动作','速度不正常','风扇问题','驱动灯','参数问题','无法上电','端口问题','烧坏','爆炸','进水','跳闸','单向运行','外壳破损','按键问题','断丝锥',
          '尺寸问题','5V电源低','定向问题','总线问题','电机抱闸','漏电','对地短路','外部问题','编码器问题','过冲','飞车','IPC','CF卡','急停','手摇','开关机、启停键',
          '倍率开关','装配问题','USB问题','进不了系统开机问题','轴误差大','外部接口、盖板问题','卡扣','面板灯问题','面板破损','屏幕破裂','屏幕显示问题','黑白花蓝屏','死机',
          '自动重启','轴移动问题','注册问题','软件写入异常','轴复位异常','输入输出问题','刀补问题','系统短路烧','系统盘坏','丝印、表面字体','坐标不保存','联网问题',
          'DOS问题','主板坏','轴口坏','机械手不在原位','动力线','编码线','指令线','总线','机械问题','信号线','其他描述','无故障','相序错报警','断电数据丢失','位置丢失',
          '关键参数丢失','零点跑','反馈位置脉冲出错'],
        impedimentReasonArray: ['硬件故障', '软件缺陷', '调试不当', '使用不当', '工艺问题', '其他'],
        impedimentResolveResultArray: ['更换配件', '修改参数', '软件升级', '维修机械', '改进工艺', '其他'],
        applicationRangeArray: ['航空领域', '航天领域', '船舶领域', '汽车领域', '兵器领域', '电子信息', '机床制造', '核工业'],
        impedimentState: 0,
        belongedDistrict: '',
        ownDistrict: '',
        secondDepartment: '',
        userName: "",
        name: "",
        role: "",
        compId: "",
        assignLists:[],
        engineers:[],
        slotCardListsOption:{
          isEdie:false
        }
      };
    },
    computed: {
      count () {
        return this.expand ? 11 : 7;
      },
      doHandleDate: function () {
        const myDate = new Date();
        const tYear = myDate.getFullYear();
        const tMonth = myDate.getMonth();
        const tDay = myDate.getDate();
        let m = tMonth + 1;
        if (m.toString().length === 1) {
          m = "0" + m;
        }
        return moment(tYear +'-'+ m + '-' + tDay);
      }
    },
    async mounted () {
      const { saleNumber, suit } = this.$route.query;
      this.getSaleDetail(saleNumber);
      this.suit = suit;
      this.belongedDistrict = localStorage.getItem('belongedDistrict');
      getRoleId(this);
      await this.getAssignList({ companyId: this.compId }, "assignLists");
    },
    methods: {
      disabledDate (current) {
        // Can not select days before today and today
        return current && current > moment().endOf('day');
      },
      // 根据订单编号获取售后详情;
      async getSaleDetail (saleNumber) {
        const res = await api.reqSaleDetail({afterSaleNumber: saleNumber});
        if (res.MsgCode !== 0) {
          return
        }
        console.log(res.Data);
        this.impedimentStartTime = moment(res.Data.impedimentStartTime);
        if (!res.Data.equipmentType) {
          res.Data.equipmentTypeArray = [];
        } else {
          res.Data.equipmentTypeArray = res.Data.equipmentType.split(',');
        }
        if (!res.Data.impedimentType) {
          res.Data.impedimentTypeArray = [];
        } else {
          res.Data.impedimentTypeArray = res.Data.impedimentType.split(',');
        }
        if (!res.Data.faultClass) {
          res.Data.faultClassArray = [];
        } else {
          res.Data.faultClassArray = res.Data.faultClass.split(',');
        }
        if (!res.Data.impedimentReason) {
          res.Data.impedimentReasonArray = [];
        } else {
          res.Data.impedimentReasonArray = res.Data.impedimentReason.split(',');
        }
        if (!res.Data.impedimentResolveResult) {
          res.Data.impedimentResolveResultArray = [];
        } else {
          res.Data.impedimentResolveResultArray = res.Data.impedimentResolveResult.split(',');
        }
        if (!res.Data.applicationRange) {
          res.Data.applicationRangeArray = [];
        } else {
          res.Data.applicationRangeArray = res.Data.applicationRange.split(',');
        }
        this.saleData = res.Data;
        this.ownDistrict = res.Data.ownDistrict;
        this.secondDepartment = res.Data.secondDepartment;
        this.isViIssue = res.Data.isViIssue;
        this.flag = res.Data.isViIssue === "false" ? false : true;
        this.viIssueInfo = res.Data.viIssueInfo;
        this.impedimentState = res.Data.viIssueInfo;
        const impedimentState = res.Data.impedimentState;
        if (impedimentState === 8 || impedimentState === 9 || impedimentState === 5) {
          this.showRoleBtn = true;
        }
        if (impedimentState === 10) {
          this.showRoleBtn = false;
        }
        this.$emit('getCurrentState', res.Data.impedimentState);
        //console.log(this.saleData);
        let urlArray = [];
        urlArray.push(res.Data.pictureUrl);
        let urlValue;
        //获取图片url;
        let lastUrl = [];
        for (let i = 0; i < urlArray.length; i++) {
          for (let k in urlArray[i]) {
            urlValue = urlArray[i][k];
            lastUrl.push({
              url: GLOBAL.imgDownUrl + urlArray[i][k],
              id: k
            });
          }
        }
        const fileList = lastUrl.map((item, index) => {
          return {
            uid: -index,
            name: 'image.png',
            url: item.url,
            id: item.id,
            status: 'done'
          }
        });
        let picturesId = '';
        let pictureIdArr = [];
        if (fileList.length === 0) {
          picturesId = '';
        } else {
          for (let i = 0; i < fileList.length; i++) {
            pictureIdArr.push(fileList[i].id);
            picturesId = pictureIdArr.join(',');
          }
        }
        this.originalPicturesId = picturesId;
        this.fileList = fileList;
        this.engineers = res.Data.engineers;
      },
      // 获取子组件传递过来的图片;
      handleChangePic (fileList) {
        this.clientFileList = fileList;
        let picturesId = '';
        let pictureIdArr = [];
        if (fileList.length === 0) {
          picturesId = '';
        } else {
          for (let i = 0; i < fileList.length; i++) {
            pictureIdArr.push(fileList[i].id);
            picturesId = pictureIdArr.join(',');
          }
        }
        this.picturesId = picturesId;
      },
      //点击切换是否重大问题;
      onRadioChange (e) {
        const radioValue = e.target.value;
        if (radioValue === "false") {
          this.radioShow = false;
          this.flag = false;

        } else {
          this.radioShow = true;
          this.flag = true;
        }
      },
      // 确认修改服务单;
      handleSaleSubmit (e) {
        e.preventDefault();
        this.form.validateFields((error, values) => {
          if (error) { return }
          let newPicturesId = '';
          // 如果没有修改图片, 则是原来的图片;
          if (this.clientFileList.length === 0) {
            if (this.fileList.length === 0) {
              this.$message.info('请至少添加一张图片');
              return;
            }
            newPicturesId = this.originalPicturesId;
          } else {
            newPicturesId = this.picturesId;
          }
          const newImpedimentStartTime = values['impedimentStartTime'].format('YYYY-MM-DD');
          let afterSaleData = {};
          afterSaleData.afterSaleNumber = values.afterSaleNumber;
          afterSaleData.repairOrderNumber = values.repairOrderNumber;
          afterSaleData.username = this.userName;
          afterSaleData.ownDistrict = this.ownDistrict;
          afterSaleData.secondDepartment = this.secondDepartment;
          afterSaleData.customerType = values.customerType;
          afterSaleData.informationSource = values.informationSource;
          afterSaleData.taskType = values.taskType;
          afterSaleData.ncNumber = values.ncNumber;
          afterSaleData.macSn = values.macSn;
          afterSaleData.ncVersionType = values.ncVersionType;
          afterSaleData.impedimentStartTime = newImpedimentStartTime;
          afterSaleData.equipmentType = values.equipmentType.join(',');   // 设备类型(多选)
          afterSaleData.impedimentType = values.impedimentType.join(',');   // 故障类型(多选)
          afterSaleData.impedimentDescri = values.impedimentDescri; //(故障详细描述)
          afterSaleData.guaranteeState = values.guaranteeState;
          afterSaleData.faultyPartsType = values.faultyPartsType;
          afterSaleData.faultyPartsNumber = values.faultyPartsNumber;
          afterSaleData.faultyPartsTime = values.faultyPartsTime;
          // afterSaleData.fieldEngineer = values.fieldEngineer;
          // afterSaleData.resolveTime = values.resolveTime;
          // afterSaleData.extraTime = values.extraTime;
          // afterSaleData.resolveNcNumber = values.resolveNcNumber;
          afterSaleData.isViIssue = this.isViIssue;
          afterSaleData.viIssueInfo = values.viIssueInfo || "";
          afterSaleData.remark = '';
          afterSaleData.pictureId = newPicturesId; //图片
          // 后来新增的字段;
          afterSaleData.faultClass = values.faultClass.join(','); //故障分类(多选);
          afterSaleData.impedimentReason = values.impedimentReason.join(','); //故障原因(多选);
          afterSaleData.impedimentResolveResult = values.impedimentResolveResult.join(',');  //故障处理结果(多选);
          afterSaleData.otherDescription = values.otherDescription;  //其他描述;
          afterSaleData.demandSuggestion = values.demandSuggestion;  //需求建议;
          afterSaleData.solution = values.solution;  //解决方案;
          afterSaleData.softIssue = '';  //软件问题;
          afterSaleData.topicName = values.topicName;  //课题名称;
          afterSaleData.topicNumber = values.topicNumber;  //课题编号;
          afterSaleData.applicationRange = values.applicationRange.join(',');  //应用领域(多选);
          afterSaleData.id = values.id;  //数据id;
          afterSaleData.impedimentState = values.impedimentState;  //订单当前的状态;
          afterSaleData.engineers = this.engineers;  //人员列表;

          let engineersLists = []
          let verifyeEgineers = true
          let keyAry = ['username', 'day', 'overtime', 'resolveNcNumber']
          afterSaleData.engineers.forEach((item,index) => {
            for (const key in item) {
              if (Object.hasOwnProperty.call(item, key)) {
                if(keyAry.indexOf(key) > -1){
                  if(item[key].toString() == '' || item[key].toString() == undefined){
                    verifyeEgineers = false
                    return
                  }
                }   
              }
            }
          });

          if (!verifyeEgineers) {
            this.$message.error('请填写完整的人员信息');
            return;
          }

          const jsonRepairNewData = JSON.stringify(afterSaleData);
          console.log(jsonRepairNewData);
          api.reqUpdateSaleBill(jsonRepairNewData).then((res) => {
            if (res.MsgCode === 0) {
              this.$Modal.success({
                title: '',
                content: '修改售后单成功!',
                okText: '确定',
                onOk: () => {
                  if (this.impedimentState === 8 || this.impedimentState === 9 || this.impedimentState === 5) {
                    this.showRoleBtn = true;
                  }
                  if (this.impedimentState === 10) {
                    this.showRoleBtn = false;
                  }
                  this.showSaleUpdateBtn = true;
                  this.slotCardListsOption.isEdie = false;
                }
              });
              //this.showSaleUpdateBtn = true;
            } else {
              this.$message.error('修改失败...');
            }
          })
        });
      },
      // 点击重置;
      handleReset () {
        this.form.resetFields();
      },
      // 点击服务单的修改;
      showClientUpdate (e) {
        e.preventDefault();
        this.showSaleUpdateBtn = false;
        this.slotCardListsOption.isEdie = true;
      },

      // 获取指派人
      async getAssignList(parames, key) {
        let _this = this;
        const res = await api.getAssignList({
          username: _this.userName,
          ...parames
        });

        if (res.msgCode !== 0) {
          return;
        }

        this[key] = buildSelectOption(res.data);

        function buildSelectOption(lists) {
          let _lists = [];

          _lists = lists.map((item, index) => {
            let { operator, username } = item;
            return {
              label: `${operator}  ${username}`,
              value: username
            };
          });

          return _lists;
        }
      },

      // 过滤指派人
      filterAssignName(input, option) {
        let str = input.replace(/\s*/g, "");
        let name = option.componentOptions.children[0].text;

        if (name == "" || name == undefined || str == "" || str == undefined) {
          return false;
        } else {
          let isMatch = name.indexOf(str) >= 0;
          return isMatch;
        }
      }

    },
  };
</script>
<style>
  @import "./style.css";
</style>
